<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-07-22 15:40:54
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-20 15:32:06
 * @FilePath: \orderApp\pages\home\components\dishes.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <cu-card  radius="15rpx 0 0 0 ">
    <p class="tit">本周食谱</p>
    <!-- 星期数 -->
    <view class="clendarBox cu-flex">
      <view
        v-for="(item, index) in weeksList"
        :key="index"
        class="clenderItem cu-flex flex-col"
        :class="index == curWeekInfo.weekIdx ? 'weekActive' : ''"
        @click="changeWeek(item, index)"
      >
        <text class="weeks">{{ item.week }}</text>
        <text class="days">{{ dayjs(item.day).format('MM/DD') }}</text>
      </view>
    </view>
    <!-- 餐次列表 -->
    <view class="mealBox flex">
      <view
        v-for="(item, index) in mealList"
        class="mealItem"
        :class="index == curMeal ? 'mealActive' : ''"
        :key="index"
        @click="changeMeal(index)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 菜肴列表 -->
    <view class="menuBox flex" v-if="dishesList.length > 0">
      <view
        class="menuItem"
        v-for="(item, index) in dishesList"
        :key="index"
        @click="goComment(item)"
      >
        <view class="imgBox">
          <view class="tagBox " :class="!item.dishEvaluateFlag ? 'not_tag' : 'already_tag'">{{item.dishEvaluateFlag ? '已评' : '未评'}}</view>
          <uv-image
            :src="item.dishUrl"
            width="100%"
            height="100%"
            radius="10rpx 10rpx 0 0"
            :observeLazyLoad="true"
          >
            <template v-slot:loading>
              <uv-loading-icon color="#d9dede"></uv-loading-icon>
            </template>
          </uv-image>
        </view>
        <p class="name ellipsis">{{ item.dishName }}</p>
        <view class="flex comBox">
          <p class="sub-tit">评价:</p>
          <uv-rate
            :allowHalf="true"
            :readonly="true"
            active-color="#FAD20C"
            inactive-color="#DCDEE0"
            gutter="0"
            size="16"
            :value="item.dishStar / 2"
          ></uv-rate>
        </view>
      </view>
    </view>
    <view v-else>
      <cu-empty></cu-empty>
    </view>
  </cu-card>
</template>

<script lang="ts" setup>
import { reqCurDate, reqWeekRecipe, addBudgetOrder } from "@/service/business/goods";
import { getWeekDate } from "@/utils/time";

import dayjs, { Dayjs } from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
import type { DishesInfo, DishType } from "@/service/business/goods/type";
import { useUserStore } from "@/store";
const userStore = useUserStore();
// 获取当前餐段、日期数据
const getCurDate = () => {
  return new Promise<void>((resolve, reject) => {
    reqCurDate().then((res) => {
      if (res.retCode == 2000) {
        curMeal.value = res.data.mealTime;
        curWeekInfo.value.weeksTime = res.data.weeks_time;
        curWeekInfo.value.weekIdx = weeksList.value.findIndex(
          (el) => el.sign == res.data.weeks_time
        );
        getWeekRecipe();
      }
    });
  });
};
// 当前星期数标识
const curWeekInfo = ref({
  weekIdx: 0,
  weeksTime: "one",
});

// 当前餐次标识
const curMeal = ref(0);

const mealList = ref([
  { name: "早餐", id: "" },
  { name: "中餐", id: "" },
  { name: "晚餐", id: "" },
]);

const weeksOrigin = () => [
  { week: "周一", day: "", sign: "one" },
  { week: "周二", day: "", sign: "two" },
  { week: "周三", day: "", sign: "three" },
  { week: "周四", day: "", sign: "four" },
  { week: "周五", day: "", sign: "five" },
  { week: "周六", day: "", sign: "six" },
  { week: "周日", day: "", sign: "seven" },
];
const weeksList = ref(weeksOrigin());

// 切换星期数
const changeWeek = (item, index) => {
  curWeekInfo.value.weekIdx = index;
  curWeekInfo.value.weeksTime = item.sign;
  getWeekRecipe();
};
// 切换餐次
const changeMeal = (index) => {
  curMeal.value = index;
  getWeekRecipe();
};

// 菜肴列表
const dishesList = ref<[DishesInfo]>([]);
const getWeekRecipe = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  const parmas = {
    kitchenId: userStore.userInfo.user.kitchenId,
    userId: userStore.userInfo.user.userId,
    sign: 0,
    mealTime: curMeal.value,
    weeksTime: curWeekInfo.value.weeksTime,
    eatDate:weeksList.value[curWeekInfo.value.weekIdx].day,
  };
  reqWeekRecipe(parmas).then((res) => {
    if (res.retCode == 2000) {
      uni.hideLoading();
      dishesList.value = res.data || [];
    }
  });
};

// 查看菜肴信息
const goComment = (item) => {
  const { dishCode, recipedtlId } = item;

  let mealInfo = {
    type:1,
    dishCode,
    recipedtlId,
    eatDate:weeksList.value[curWeekInfo.value.weekIdx].day,
    mealTime:curMeal.value

  }
  uni.navigateTo({
    // url:
    //   "/packageOne/pages/dishesDetail/index?type=1&code=" +
    //   dishCode +
    //   "&id=" +
    //   recipedtlId,
    url:'/packageOne/pages/dishesDetail/index',
      success:(res)=>{
        res.eventChannel.emit('mealInfo',{data:mealInfo})
      },
  });
};

onShow(() => {
  getCurDate();
});

onMounted(() => {
  const arr = getWeekDate("current", "YYYY-MM-DD");
  weeksList.value.forEach((el, index) => {
    el.day = arr[index];
  });
});
</script>

<style lang="scss" scoped>
.tit {
  font-weight: 600;
  font-size: 31rpx;
  color: #111111;
  line-height: 46rpx;
  margin-bottom: 24rpx;
}
.clendarBox {
  justify-content: space-between;

  .clenderItem {
    width: 85rpx;
    height: 91rpx;
    background: #f9f9f9;
    border-radius: 8rpx;

    .weeks {
      font-weight: 600;
      font-size: 23rpx;
      color: #323233;
      line-height: 38rpx;
    }

    .days {
      font-weight: 400;
      font-size: 23rpx;
      color: #969799;
      line-height: 38rpx;
    }
  }
  .weekActive {
    background: #00754a;

    .weeks,
    .days {
      color: #fff;
    }
  }
}

.mealBox {
  margin: 23rpx 0;
  .mealItem {
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
    line-height: 38rpx;
    margin-right: 46rpx;
  }
  .mealActive {
    font-weight: bold;
    font-size: 27rpx;
    color: #00754a;
  }
}

.menuBox {
  flex-wrap: wrap;
  justify-content: space-between;

  .menuItem {
    width: 32%;
    height: 250rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1),
      0rpx 2rpx 23rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 15rpx;
    // margin-right: 2%;

    .imgBox {
      width: 100%;
      height: 65%;
      position: relative;
      overflow: hidden;
      .tagBox {
        position: absolute;
        top: 9rpx;
        left: -30rpx;
        z-index: 1;
        width: 115rpx;
        height: 38rpx;
        transform: rotate(-45deg);
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 23rpx;
        line-height: 38rpx;
      }
      .not_tag {
        background: #00754a;
        color: #ffffff;
      }
      .already_tag {
        background: rgba(212, 233, 226, 0.9);
        color: #00754a;
      }
    }

    .name {
      font-weight: 400;
      width: 100%;
      font-size: 27rpx;
      color: #111111;
      line-height: 42rpx;
      padding: 0 6rpx;
      box-sizing: border-box;
    }
    .comBox {
      padding: 0 6rpx;
      display: flex;
      // justify-content: center;
      align-items: center;
      .sub-tit {
        font-weight: 400;
        font-size: 19rpx;
        color: #969799;
        padding-right: 3rpx;
        text-align: left;
      }
    }
  }
  .menuItem:last-child:nth-child(3n-1) {
    margin-right: calc(32% + 3% / 2);
  }

  .menuItem:last-child:nth-child(3n-2) {
    margin-right: calc(64% + 6% / 2);
  }
}
</style>
